<template>
    <div>

        <div> <el-form :inline="true" :model="formInline" class="demo-form-inline">

                <el-form-item label="供应商编号">
                    <el-input v-model="formInline.SupplierNumber" placeholder="供应商编号" clearable />
                </el-form-item>
                <el-form-item label="供应商名称">
                    <el-input v-model="formInline.SupplierName" placeholder="供应商名称" clearable />
                </el-form-item>
                <el-form-item label="负责人电话">
                    <el-input v-model="formInline.PrincipalTelephone" placeholder="负责人电话" clearable />
                </el-form-item>
                <el-form-item label="所属市场">
                    <el-input v-model="formInline.Market" placeholder="所属市场" clearable />
                </el-form-item>
                <el-form-item label="服务人员">
                    <el-input v-model="formInline.ServiceStaff" placeholder="服务人员" clearable />
                </el-form-item>
                <el-form-item label="归集档案">
                    <el-input v-model="formInline.ServiceStaff" placeholder="归集档案" clearable />

                </el-form-item>

                <el-form-item label="使用状态">
                    <el-select v-model="formInline.UseOftate" placeholder="全部" clearable>
                        <el-option label="启用" :value="true" />
                        <el-option label="禁用" :value="false" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="LoadData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="AddSupper">增加</el-button>
                </el-form-item>
            </el-form></div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="序号" width="120" fixed>
                <template v-slot="a">
                    {{ a.$index + (page.pageIndex - 1) * page.pageSize + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="SupplierName" label="供应商编号" width="180" />
            <el-table-column prop="SupplierName" label="供应商名称" width="180" />
            <el-table-column prop="SupplierType" label="供应商类型" width="180" />
            <el-table-column prop="PrincipalTelephone" label="负责人电话" width="180" />
            <el-table-column prop="BuildingUser" label="使用单位" width="180" />
            <el-table-column prop="Market" label="所属市场" width="180" />
            <el-table-column prop="ServiceStaff" label="服务人员" width="180" />
            <el-table-column prop="CollectionFile" label="归集档案" width="180" />
            <el-table-column prop="UseOftate" label="使用状态" width="180">
                <template v-slot="scope">
                    <span>{{
                        scope.row.UseOftate ? "启用" : "禁用"
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="UpdateBy" label="修改人" width="180" />
            <el-table-column prop="UpdateDate" label="最后修改时间" width="180">
                <template v-slot="scope">
                    <span>{{
                        scope.row.UpdateDate
                            ? scope.row.UpdateDate.replace("T", " ").substring(0, 19)
                            : null
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="SupplierId" label="操作" width="180" fixed="right">
                <template v-slot="scope">
                    <button class="borderless-button" style="color: blue" @click="LookSupper(scope.row.SupplierId)">
                        查看
                    </button>
                    &emsp;
                    <button class="borderless-button" style="color: blue" @click="DelSupp(scope.row.SupplierId)">
                        删除
                    </button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                :page-sizes="[1, 15, 30, 45]" :background="true" layout="slot,total, sizes, prev, pager, next, jumper"
                :total="page.pageCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script setup lang="ts">
import http from '@/http';
import { ref, reactive, inject, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { AxiosStatic } from 'axios';
import {
    Plus,
    Search,
    Delete,
    DocumentChecked,
    Back,
    Warning,
    SuccessFilled
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router"
const router = useRouter()

import { shallowRef } from '@vue/reactivity';
const formInline = reactive({
    SupplierNumber: '',
    SupplierName: '',
    PrincipalTelephone: '',
    Market: '',
    ServiceStaff: '',
    CollectionFile: '',
    UseOftate: '',
})

const ruleForm = reactive({})


const DelSupp = (Id: string) => {
    ElMessageBox.confirm(
        '确定要删除当前数据吗?',
        '警告',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        http
            .get("Organization/api/Supplier/HandleDelSupplier?SupplierId=" + Id)
            .then((res) => {
                if (res.data > 0) {

                    ElMessage({
                        type: "success",
                        message: "删除成功",
                        duration: 2000
                    });
                    LoadData();
                } else {
                    ElMessage({
                        type: "error",
                        message: "删除失败",
                        duration: 2000
                    });
                }
            });
    })
}



const page = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    pageCount: 0
})

//每页显示条数
const handleSizeChange = (val: number) => {
    page.pageSize = val;
    LoadData();
}
//当前页索引
const handleCurrentChange = (val: number) => {
    page.pageIndex = val;
    LoadData();
}


const AddSupper = () => {
    router.push("SupplierAdd.vue");
}

const LookSupper = (id: string) => {
    router.push("ShowSupplier.vue?id=" + id);
}

const tableData = ref([]);
const LoadData = () => {
    http.get("OrganizationRead/api/Supplier/HandleGetSupplier", {
        params: {
            SupplierNumber: formInline.SupplierNumber,
            SupplierName: formInline.SupplierName,
            PrincipalTelephone: formInline.PrincipalTelephone,
            Market: formInline.Market,
            ServiceStaff: formInline.ServiceStaff,
            CollectionFile: formInline.CollectionFile,
            UseOftate: formInline.UseOftate,
            Index: page.pageIndex,
            Size: page.pageSize
        }
    }).then(res => {
        console.log(res.data)
        tableData.value = res.data.datas
        page.totalCount = res.data.totalCount
        page.pageCount = res.data.pageCount
    })
};

onMounted(() => {
    LoadData();
});


</script>
<style></style>